---
title: Fireworks Background
description: A background component that displays a fireworks animation.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-backgrounds-fireworks" />

## Installation

<ComponentInstallation name="components-backgrounds-fireworks" />

## Usage

```tsx
<FireworksBackground />
```

## Examples

### Fireworks Circle

<ComponentPreview name="demo-components-backgrounds-fireworks-circle" />

## API Reference

### FireworksBackground

<TypeTable
  type={{
    population: {
      description: 'The population of fireworks to display.',
      type: 'number',
      required: false,
      default: '1',
    },
    color: {
      description: 'The color of the fireworks.',
      type: 'string | string[]',
      required: false,
    },
    fireworkSpeed: {
      description: 'The speed of the fireworks.',
      type: 'number | { min: number; max: number }',
      required: false,
      default: '{ min: 4, max: 8 }',
    },
    fireworkSize: {
      description: 'The size of the fireworks.',
      type: 'number | { min: number; max: number }',
      required: false,
      default: '{ min: 2, max: 5 }',
    },
    particleSpeed: {
      description: 'The speed of the particles.',
      type: 'number | { min: number; max: number }',
      required: false,
      default: '{ min: 2, max: 7 }',
    },
    particleSize: {
      description: 'The size of the particles.',
      type: 'number | { min: number; max: number }',
      required: false,
      default: '{ min: 1, max: 5 }',
    },
    canvasProps: {
      description: 'The props of the canvas element.',
      type: 'React.ComponentProps<"canvas">',
      required: false,
    },
    '...props': {
      description: 'The props of the FireworksBackground.',
      type: 'React.ComponentProps<"div">',
      required: false,
    },
  }}
/>

## Credits

- Credits to [Matt Cannon](https://codepen.io/matt-cannon/pen/YPKGBGm) for the inspiration
